<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>游客投递记录</h2>
        </div>
      </div>
      <div class="normal-box-bd">
        <Card style="margin-bottom: 10px">
          <div class="normal-list-page-hd clearfix">
            <Select class="mr-10" v-model="queryData.garbageType"
                    style="width: 200px">
              <Option v-for="item in typeList"
                      :value="item.label"
                      :key="item.label">{{ item.label }}</Option>
            </Select>
            <Button type="primary"
                    custom-icon="iconfont icon-chaxun"
                    size="small"
                    @click="getTableData">查询</Button>
          </div>
        </Card>
        <div class="normal-list-page-mod">
          <div class="normal-list-page-bd">
            <Table border
                   :loading="list.loading"
                   :columns="list.columns"
                   :data="list.tableData"
                   @on-selection-change="selectionChange"></Table>
          </div>
          <div class="normal-list-page-ft clearfix">
            <Page class="fr"
                  :total="queryData.totalRecord"
                  :page-size="queryData.pageSize"
                  :current="queryData.page"
                  @on-change="changePage"
                  @on-page-size-change="onPageSizeChange"
                  show-elevator
                  show-total
                  show-sizer></Page>
          </div>
        </div>
        <Modal v-model="modal.mallAdvertising.bigPicVisible"
               width="1000px">
          <img :src="modal.mallAdvertising.bigPicUrl"
               style=" width:100%;height:100%" />
          <div slot="footer" />
        </Modal>
      </div>
    </div>
  </div>
</template>
<script>
import deliverApi from '@/api/RecordsCenter/deliver.js'
import { Message } from 'iview'
import WangEditor from '@/components/Editor/WangEditor.vue'
import Uploadoss from '@/components/uploadoss'
import uploadImage from '@/components/upload-image/upload-image'
import global from '@/assets/js/global'
export default {
  name: 'mallAdvertising',
  components: {
    uploadImage,
    WangEditor,
    Uploadoss
  },
  data () {
    return {
      // 弹出层数据
      modal: {
        positionList: [
          { id: 1, name: '积分商城' },
          { id: 2, name: '新闻快讯' },
          { id: 3, name: '政策制度' },
          { id: 4, name: '分类知识' },
          { id: 5, name: '最新资讯' }
        ],
        mallAdvertising: {
          isShow: false,
          bigPicVisible: false,
          loading: true,
          bigPicUrl: ''
        }
      },
      // 列表
      list: {
        loading: false,
        selections: [],
        // 列表展示数据
        tableData: [],
        // 表格表头
        columns: [
        //   {
        //     type: 'selection',
        //     width: 60,
        //     align: 'center'
        //   },
          /** 开始自动生成 */
          { title: 'id', key: 'id', align: 'center', minWidth: 50 },
          { title: '垃圾类型', key: 'garbageType', align: 'center', minWidth: 120 },
          {
            title: '游客图片',
            key: 'url',
            align: 'center',
            minWidth: 200,
            render: (h, params) => {
              return h('img', {
                attrs: {
                  src: params.row.userUrl
                },
                style: {
                  width: 'auto',
                  height: '100px'
                },
                on: {
                  click: () => {
                    this.showBigPic(params.row.userUrl) // 此处再用一个方法，建一个modal把图放大。
                  }
                }
              })
            }
          },
          {
            title: '投递时间',
            key: 'createTime',
            align: 'center',
            minWidth: 130
          },
          {
            title: '重量',
            key: 'weight',
            align: 'center',
            minWidth: 130
          },
          {
            title: '垃圾照片',
            key: 'url',
            align: 'center',
            minWidth: 200,
            render: (h, params) => {
              return h('img', {
                attrs: {
                  src: params.row.garbageUrl
                },
                style: {
                  width: 'auto',
                  height: '100px'
                },
                on: {
                  click: () => {
                    this.showBigPic(params.row.garbageUrl) // 此处再用一个方法，建一个modal把图放大。
                  }
                }
              })
            }
          },
          {
            title: '评价',
            key: 'score',
            align: 'center',
            minWidth: 130,
            render: (h, params) => {
              if (params.row.score === 1) {
                return h('div', '差')
              } else if (params.row.score === 2) {
                return h('div', '一般 ')
              } else if (params.row.score === 3) {
                return h('div', '优 ')
              } else {
                return h('div', '未评价')
              }
            }
          }
          /** 自动生成结束 */

        ]
      },
      typeList: [
        { label: '其它垃圾', value: '其它垃圾' },
        { label: '可回收垃圾', value: '可回收垃圾' },
        { label: '厨余垃圾', value: '厨余垃圾' },
        { label: '有毒有害', value: '有毒有害' }
      ],
      // 页面查询数据
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0,
        garbageType: ''
      }
    }
  },
  methods: {
    showBigPic (item) {
      this.modal.mallAdvertising.bigPicVisible = true
      this.modal.mallAdvertising.bigPicUrl = item
    },
    // 获取列表
    getTableData () {
      const that = this
      deliverApi
        .getVisitorList(that.queryData)
        .then((res) => {
          console.log(res.data.list)
          that.list.tableData = res.data.list
          that.queryData.totalRecord = res.data.totalRecord
          that.queryData.page = res.data.pageNum
          that.queryData.limit = res.data.pageSize
        })
        .catch((error) => {
          Message.error(error)
        })
    },

    // 每页显示记录数变更
    onPageSizeChange (pageSize) {
      this.queryData.limit = pageSize
      this.getTableData()
    },

    // 换页
    changePage (page) {
      this.queryData.page = page
      this.getTableData()
    }
  },

  created () {
    this.getTableData()
  }
}
</script>
